<template>
  <div class="home">
    <div class="content" ref="element">
      <div class="input">
        <img class="logo" src="../assets/img/logo.png" />
        <div class="title">{{ meetingtitle }}入口</div>
        <div class="inputbox">
          <div class="tips">请输入您的登记手机号:</div>
          <Form :model="userInfo" :rules="ruleValidate" ref="verifyForm">
            <FormItem prop="registerPhone"
              ><Input
                placeholder="请输入您报名时的手机号"
                v-model="userInfo.registerPhone"
              ></Input
            ></FormItem>
          </Form>

          <Button class="verifybtn" @click="Verify('verifyForm')">验证</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Api from "../api/api";
import "../assets/css/loading.css";
export default {
  name: "Home",
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback("手机号格式不正确");
      } else {
        callback();
      }
    };

    return {
      meetingId: "",
      meetingtitle: "会议",
      userInfo: {
        registerPhone: ""
      },
      ruleValidate: {
        registerPhone: [
          {
            required: true,
            type: "number",
            validator: validatePhone,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    Verify(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let formdata = new FormData();
          this.axios
            .get(Api.checkRegisterPhoto, {
              params: {
                meetingId: this.meetingId,
                registerPhone: this.userInfo.registerPhone
              }
            })
            .then(res => {
              if (res.data.status == 0) {
                this.$Message.error(res.data.msg);
              } else {
                this.$Message.success("成功验证！");
              }
            });
        } else {
          this.$Message.error("手机号未输入或格式有误!");
        }
      });
    },
    getMeetingMsg() {
      //通过二维码进入时获取当前会议信息
      let meetingId = sessionStorage.getItem("meetingId");
      let meetingdata = sessionStorage.getItem("meetingMsg");
      window.console.log("meetingId=", meetingdata.meetingId);
      this.meetingId = meetingId;
    }
  },
  created() {
    this.getMeetingMsg();
  },
  mounted() {
    let contentheight = this.$refs.element.offsetHeight;
    this.bodyHeight = document.documentElement.clientHeight;
  }
};
</script>
<style>
.home {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.logo {
  position: relative;
  width: 2.5rem;
}

.input {
  position: relative;
  width: 4.8rem;
  margin: 0 auto;
}
.inputbox {
  position: relative;
  width: 100%;
  margin: 0 auto;
  margin-top: 2rem;
}
.tips {
  color: #ffffff;
  font-family: "PingFang";
}
.verifybtn {
  font-size: 0.25rem;
  font-family: "PingFang";
}
</style>
